<template>
    <div id="map">
        <div id="container"></div>

        <div class="input-card-map" style='width: 10rem;'>
            <el-radio v-for="layer in layerArrays" :key="layer.id" v-model="mapLayerIndex" :label="layer.id"
                :disabled="!canChangeLayer">{{ layer.name }}</el-radio>
                <el-button @click="getImage">
                    <el-icon><Download /></el-icon>
                </el-button>
        </div>
    </div>
</template>

<script lang="ts" setup name="AMapView">
// @ts-ignore
import AMapLoader from "@amap/amap-jsapi-loader";
import { MapCoordSys } from "@/class/map/myMapOpt";
import { Layer } from "@/class/map/Layer";
import { onBeforeMount, reactive, ref, watch } from "vue";
import { useHtml2Image } from "@/hooks/map2Image";
let mapLayerIndex = ref(0);
let layerArrays = ref<Layer[]>([])
let map

defineProps<{ canChangeLayer: boolean }>()
const emit = defineEmits(['updateMap', 'updateCoordys'])

// region 初始化数据
/**
 * 添加数据、加载地图
 */
async function initMap() {
    let AMap = await AMapLoader.load({
        key: "99df1adfafd916e84e7b953d75c626d7",             // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.MouseTool'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
    try {
        map = new AMap.Map("container", {  //设置地图容器id
            // viewMode:"3D",    //是否为3D地图模式
            zoom: 10,           //初始化地图级别
            // center:[105.602725,37.076636], //初始化地图中心点位置
            WebGLParams: { //截取图片
                preserveDrawingBuffer: true
            }
        });
        emit('updateMap', map)
        initLayer(AMap)
    } catch (e) {
        console.log(e)
    }
}
/**
 * 初始化地图图层
 */
function initLayer(AMap) {
    let amapTitleLayer = new AMap.TileLayer();
    let amapSatellite = new AMap.TileLayer.Satellite();
    layerArrays.value.push(new Layer({
        id: 0,
        url: "",
        name: "默认",
        coordsys: MapCoordSys.CJ02,
        layer: amapTitleLayer,
    }))
    layerArrays.value.push(new Layer({
        id: 1,
        url: "",
        name: "高德",
        layer: amapSatellite,
        coordsys: MapCoordSys.CJ02
    }))
    Layer.getLayer().then(result => {
        result.forEach(item => {
            let url = item.url
            layerArrays.value.push(new Layer({
                id: layerArrays.value.length,
                url: "",
                name: item.name,
                layer: new AMap.TileLayer({
                    zIndex: 3,
                    getTileUrl: function (x, y, z) {
                        let tempurl
                        tempurl = url.replace('${x}', x)
                        tempurl = tempurl.replace('${y}', y)
                        tempurl = tempurl.replace('${z}', z)
                        return tempurl
                    }
                }),
                coordsys: item.coordsys
            }))
        })
    })
    mapLayerIndex.value = 0
}
const {getIdCarema}=useHtml2Image()
const getImage = () => {
    getIdCarema("container")
}
//endregion
watch(mapLayerIndex, (newval, oldVal) => {
    if (newval === 0) {
        map.remove(layerArrays.value[oldVal].layer)
        emit('updateCoordys', MapCoordSys.CJ02)
    } else {
        emit('updateCoordys', layerArrays.value[newval].coordsys)
        map.add(layerArrays.value[newval].layer)
        map.remove(layerArrays.value[oldVal].layer)
    }
})


onBeforeMount(() => {
    initMap()
})

</script>

<style scoped>
#map {

    width: 100%;
    position: relative;
    height: 70vh;
}

#container {
    height: 100%;
}

.input-card-map {
    position: absolute;
    bottom: 2px;

    right: 1px;
    /*margin-right: 1px;*/
    width: 200px;
    /*height: 100px;*/
    /*border: 3px solid #73AD21;*/
}
</style>